<template>
  <div class="content">
    <Card dis-hover style="margin-bottom:20px" v-if="JSON.stringify(formData.options.hasSelect) !='{}' && formData.options.hasSelect && formData.options.hasSelect.selectList.length > 0 || searchData.searchColumns.length != 0 ">
        <p slot="title">搜索条件</p>
        <slot name="content_top_search"></slot>
        <!-- 筛选栏 -->
        <Row type="flex" justify="space-between">
            <Col span="24"  style="margin: 10px 0;">
              <!-- 筛选栏自定义菜单 -->
              <slot name="content_top_right"></slot>
              <!-- 下拉选择 -->
              <template v-if="JSON.stringify(formData.options.hasSelect) !='{}' && formData.options.hasSelect && formData.options.hasSelect.selectList.length > 0">
                <template  v-for="item in formData.options.hasSelect.selectList">
                  <Select v-model="item.status" style="text-align: left;width:150px;margin-right: 10px" @on-change="handleSelect">
                      <Option v-for="select in item.selectData" :value="select.id" :key="select.id">{{ select.label }}</Option>
                  </Select>
                </template>
              </template>
              <!-- 搜索 -->
              <template v-if="searchData.searchColumns.length != 0 ">
                <table-search :searchData="searchData" @handleSearch="handleSearch"></table-search>
              </template>
            </Col>
        </Row>
    </Card>
    <!-- 工具栏 -->
    <Card dis-hover style="margin-bottom:20px" v-if="JSON.stringify(formData.options.hasAdd) !='{}' && formData.options.hasAdd">
        <p slot="title">操作按钮</p>
        <Row type="flex" justify="space-between">
            <Col span="24" class="content_top_left">
              <!-- 工具栏自定义菜单 -->
              <slot name="content_top_left"></slot>
              <!-- 新增编辑 -->
              <template v-if="JSON.stringify(formData.options.hasAdd) !='{}' && formData.options.hasAdd">
                <Button  type="primary"  @click="handleAdd">
                  新增{{formData.options.hasAdd.title}}
                </Button>
                <!-- 工具栏自定义按钮菜单 -->
                <slot name="content_top_left_button"></slot>
              </template>
            </Col>
        </Row>
        <slot name="content_top_options"></slot>
    </Card>
    <slot name="content"></slot>
    <!-- 表格 -->
    <template v-if="tableData.data">
      <table-list  :tableData="tableData" @handlePage="handlePage" @getPagesize="getPagesize"></table-list>
    </template>
  </div>
</template>
<script>
export default {
  name: "contentTemplate",
  data() {
    return {
  
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    searchData:{
      type: Object,
      default: () => {}
    },
    tableData:{
      type: Object,
      default: () => {}
    },
    getDatas:Function
  },
  mounted() {

  },
  watch:{
    
  },
  methods: {
    handleSelect(){
      this.getDatas()
    },
    handlePage(value){
      this.tableData.page = value
      this.getDatas()
    },
    getPagesize(size){
      this.tableData.per_page = size
      this.getDatas()
    },
    handleAdd(value){
      this.$emit("handleAdd", value)
      this.formData.options.hasAdd.formValidate={}
      this.formData.options.hasAdd.isedit = false
      this.formData.options.hasAdd.modal = true
    },
    handleSubmit(value) {
      this.$emit("handleSubmit", value);
    },
    handleSearch(){
      this.getDatas()
    },
  },
  components: {
   
  }
}
</script>
<style  scoped>
  .content_top_left{
    display:flex;
    align-items:center;
    margin: 10px 0;
    padding-right:10px
  }
  .ivu-table-wrapper{
    margin-top:48px !important
  };
   .Evaluatetime{
     width:80px;
     display:block
   }
   .comment{
     width:80px;
     display:block
   }
   .ivu-btn{
    margin-right:20px
   }
   .comment_user{

   }
   .comment_user_url img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
   }
   .comment_images{
    display:flex;
    margin-top:20px
   }
   .comment_images li{
    width:85px;
    height:85px;
    margin-right:10px
   }
   .comment_images li img{
    width:100%;
    height:100%;
   }
   .userinfo{
    display:flex;
    align-items:center
  }
  .avatar_url{
    width:40px;
    height:40px;
    margin-right:17px
  }
  .avatar_url img{
    width:100%;
    height:100%;
    border-radius: 50%
  }
</style>
